<script setup lang="ts">
import { ref, onMounted } from 'vue'

type LoginHistory = {
  time: string
  ip: string
  location: string
  device: string
}

// 超级管理员用户数据（调整管理范围和角色字段）
const userData = ref({
  id: '',
  username: '',
  email: '',
  realName: '',
  role: '',
  avatar: '',
  joinDate: '',
  lastLogin: '',
  status: '',
  managedScope: '所有小区', // 超级管理员管理范围：所有小区
  adminLevel: 'super', // 管理员级别标识
})

// 安全设置数据（增强超级管理员安全属性）
const securitySettings = ref({
  twoFactorAuth: false,
  passwordExpires: '',
  loginHistory: [] as LoginHistory[],
  operationLogCount: 586, // 超级管理员操作日志更多
})

// 权限数据（超级管理员全权限配置）
const accessPermissions = ref({
  canManageAllDevices: true, // 管理所有小区设备
  canManageAllUsers: true, // 管理所有用户权限
  canViewAllLogs: true, // 查看所有日志
  canConfigureGlobalRules: true, // 配置全局规则
  permissionScope: '所有小区及全局配置', // 超级管理员权限范围
})

// 表单状态（适配超级管理员权限特性）
const formState = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
  newEmail: '',
  realName: '',
  newPermissionScope: '', // 超级管理员权限不可修改
})

// 标签页状态（保持原有结构）
const activeTab = ref('profile')

// 加载超级管理员数据
const loadUserData = async () => {
  try {
    // 模拟超级管理员数据
    userData.value = {
      id: 'SUPER-ADM-001',
      username: 'super_admin',
      email: 'superadmin@property.com',
      realName: '李管理员',
      role: '超级管理员',
      avatar: 'https://picsum.photos/id/1005/200/200',
      joinDate: '2022-05-20',
      lastLogin: '2024-06-11 08:30:15',
      status: '正常',
      managedScope: '所有小区',
      adminLevel: 'super',
    }

    // 模拟超级管理员安全设置
    securitySettings.value = {
      twoFactorAuth: true, // 超级管理员强制开启两步验证
      passwordExpires: '2025-05-20',
      loginHistory: [
        {
          time: '2024-06-11 08:30:15',
          ip: '172.16.0.1',
          location: '总部运维中心',
          device: 'Chrome/124.0.0.0',
        },
        {
          time: '2024-06-10 16:45:22',
          ip: '10.10.0.5',
          location: '绿色家园小区物业（跨小区操作）',
          device: 'Firefox/123.0',
        },
        {
          time: '2024-06-09 11:20:38',
          ip: '220.181.5.78',
          location: '远程登录（总部VPN）',
          device: 'Safari/17.4',
        },
      ] as LoginHistory[],
      operationLogCount: 586,
    }

    // 模拟超级管理员权限
    accessPermissions.value = {
      canManageAllDevices: true,
      canManageAllUsers: true,
      canViewAllLogs: true,
      canConfigureGlobalRules: true,
      permissionScope: '所有小区及全局配置',
    }

    // 初始化表单数据
    formState.value.newEmail = userData.value.email
    formState.value.realName = userData.value.realName
    formState.value.newPermissionScope = accessPermissions.value.permissionScope
  } catch (error) {
    console.error('加载超级管理员数据失败:', error)
  }
}

// 保存个人信息（超级管理员专属提示）
const saveProfile = async () => {
  try {
    userData.value.realName = formState.value.realName
    userData.value.email = formState.value.newEmail
    alert('超级管理员个人信息更新成功（已同步至总部数据库）')
  } catch (error) {
    console.error('保存超级管理员个人信息失败:', error)
    alert('保存失败，请稍后重试（超级管理员信息修改需二次验证）')
  }
}

// 修改密码（增强超级管理员密码强度校验）
const changePassword = async () => {
  if (formState.value.newPassword !== formState.value.confirmPassword) {
    alert('新密码和确认密码不一致')
    return
  }

  // 超级管理员密码强度校验
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{10,}$/
  if (!passwordRegex.test(formState.value.newPassword)) {
    alert('超级管理员密码需至少10位，包含大小写字母、数字和特殊字符（!@#$%^&*）')
    return
  }

  try {
    alert('超级管理员密码修改成功，将强制登出所有已登录设备，请重新登录')
    formState.value.currentPassword = ''
    formState.value.newPassword = ''
    formState.value.confirmPassword = ''
  } catch (error) {
    console.error('修改超级管理员密码失败:', error)
    alert('修改失败，请检查当前密码是否正确（错误3次将锁定账户）')
  }
}

// 切换两步验证（超级管理员强制开启，禁止关闭）
const toggleTwoFactor = async () => {
  alert('超级管理员账户强制开启两步验证，不可关闭（符合总部安全规范）')
  securitySettings.value.twoFactorAuth = true // 强制保持开启状态
}

// 更新权限（超级管理员权限不可修改）
const updateAccessPermissions = async () => {
  alert('超级管理员权限为系统预设全权限，无需调整（如需变更需联系总部IT）')
  formState.value.newPermissionScope = accessPermissions.value.permissionScope
}

// 查看操作日志（超级管理员可查看所有日志）
const viewOperationLogs = async () => {
  try {
    alert(
      `即将打开超级管理员操作日志页面（共${securitySettings.value.operationLogCount}条记录），支持按小区、操作类型筛选`,
    )
  } catch (error) {
    console.error('获取超级管理员操作日志失败:', error)
    alert('无法加载操作日志，请联系总部IT支持')
  }
}

onMounted(() => {
  loadUserData()
})
</script>

<template>
  <div class="admin-account-center">
    <!-- 页面标题（超级管理员专属） -->
    <div class="page-header">
      <h1>管理员个人中心</h1>
      <div class="community-tag">
        管理范围：<span class="community-name">{{ userData.managedScope }}</span>
        <span class="community-id"
          >[管理员级别: {{ userData.adminLevel === 'super' ? '超级管理员' : '普通管理员' }}]</span
        >
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="sidebar">
        <div class="profile-card">
          <div class="avatar-container">
            <img :src="userData.avatar" alt="超级管理员头像" class="avatar" />
          </div>
          <div class="profile-info">
            <h3>{{ userData.realName }}</h3>
            <p class="role">{{ userData.role }}</p>
            <p
              class="status"
              :class="userData.status === '正常' ? 'status-normal' : 'status-warning'"
            >
              {{ userData.status }}
            </p>
          </div>
        </div>

        <nav class="nav-tabs">
          <button
            class="nav-tab"
            :class="{ active: activeTab === 'profile' }"
            @click="activeTab = 'profile'"
          >
            <i class="fa fa-user-circle mr-2"></i>个人信息
          </button>
          <button
            class="nav-tab"
            :class="{ active: activeTab === 'security' }"
            @click="activeTab = 'security'"
          >
            <i class="fa fa-shield mr-2"></i>安全设置
          </button>
          <button
            class="nav-tab"
            :class="{ active: activeTab === 'accessPermission' }"
            @click="activeTab = 'accessPermission'"
          >
            <i class="fa fa-key mr-2"></i>权限配置
          </button>
          <button
            class="nav-tab"
            :class="{ active: activeTab === 'account' }"
            @click="activeTab = 'account'"
          >
            <i class="fa fa-cog mr-2"></i>账户管理
          </button>
        </nav>
      </div>

      <div class="content-panel">
        <!-- 个人信息标签页 -->
        <div v-if="activeTab === 'profile'" class="tab-content">
          <h2 class="tab-title">个人信息</h2>
          <p class="tab-description">更新超级管理员个人资料和联系信息</p>

          <form class="profile-form">
            <div class="form-group">
              <label class="form-label">超级管理员ID</label>
              <input type="text" v-model="userData.id" class="form-control" disabled />
            </div>

            <div class="form-group">
              <label class="form-label">用户名</label>
              <input type="text" v-model="userData.username" class="form-control" disabled />
            </div>

            <div class="form-group">
              <label class="form-label">真实姓名</label>
              <input type="text" v-model="formState.realName" class="form-control" />
            </div>

            <div class="form-group">
              <label class="form-label">电子邮箱</label>
              <input type="email" v-model="formState.newEmail" class="form-control" />
              <p class="form-hint">修改邮箱后需通过总部验证，用于接收超级管理员专属通知</p>
            </div>

            <div class="form-group">
              <label class="form-label">管理范围</label>
              <input type="text" v-model="userData.managedScope" class="form-control" disabled />
            </div>

            <div class="form-group">
              <label class="form-label">任职日期</label>
              <input type="text" v-model="userData.joinDate" class="form-control" disabled />
            </div>

            <div class="form-group">
              <label class="form-label">最后登录</label>
              <input type="text" v-model="userData.lastLogin" class="form-control" disabled />
            </div>

            <div class="form-actions">
              <button type="button" class="btn-save" @click="saveProfile">
                <i class="fa fa-save mr-1"></i>保存修改
              </button>
            </div>
          </form>
        </div>

        <!-- 安全设置标签页 -->
        <div v-if="activeTab === 'security'" class="tab-content">
          <h2 class="tab-title">安全设置</h2>
          <p class="tab-description">管理超级管理员账户安全选项（遵循总部安全规范）</p>

          <div class="security-section">
            <h3 class="section-title">密码管理（超级管理员专用）</h3>
            <form class="password-form">
              <div class="form-group">
                <label class="form-label">当前密码</label>
                <input type="password" v-model="formState.currentPassword" class="form-control" />
              </div>

              <div class="form-group">
                <label class="form-label">新密码</label>
                <input type="password" v-model="formState.newPassword" class="form-control" />
                <p class="form-hint">
                  密码需至少10位，包含大小写字母、数字和特殊字符（!@#$%^&*），每90天强制更新
                </p>
              </div>

              <div class="form-group">
                <label class="form-label">确认新密码</label>
                <input type="password" v-model="formState.confirmPassword" class="form-control" />
              </div>

              <div class="form-actions">
                <button type="button" class="btn-save" @click="changePassword">
                  <i class="fa fa-key mr-1"></i>修改密码
                </button>
              </div>
            </form>
          </div>

          <div class="security-section">
            <h3 class="section-title">两步验证（超级管理员强制开启）</h3>
            <div class="two-factor-setting">
              <p class="setting-description">
                超级管理员账户强制开启两步验证，登录时需输入密码+手机验证码，防止账户被盗用导致全系统风险
              </p>
              <label class="toggle-switch">
                <input
                  type="checkbox"
                  v-model="securitySettings.twoFactorAuth"
                  @change="toggleTwoFactor"
                />
                <span class="slider round"></span>
              </label>
            </div>
          </div>

          <div class="security-section">
            <h3 class="section-title">操作记录（全系统范围）</h3>
            <div class="operation-log-entry">
              <div class="log-info">
                <p>最近登录记录</p>
                <p class="log-count">全系统操作日志：{{ securitySettings.operationLogCount }}条</p>
              </div>
              <button class="btn-view-logs" @click="viewOperationLogs">
                <i class="fa fa-list mr-1"></i>查看详细操作日志
              </button>
            </div>

            <div class="login-history-table">
              <div class="table-header">
                <div class="table-cell">时间</div>
                <div class="table-cell">IP地址</div>
                <div class="table-cell">操作地点</div>
                <div class="table-cell">设备</div>
              </div>
              <div
                class="table-row"
                v-for="(item, index) in securitySettings.loginHistory"
                :key="index"
              >
                <div class="table-cell">{{ item.time }}</div>
                <div class="table-cell">{{ item.ip }}</div>
                <div class="table-cell">{{ item.location }}</div>
                <div class="table-cell">{{ item.device }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 权限配置标签页 -->
        <div v-if="activeTab === 'accessPermission'" class="tab-content">
          <h2 class="tab-title">超级管理员权限配置</h2>
          <p class="tab-description">系统预设全权限</p>

          <div class="permission-section">
            <h3 class="section-title">当前权限配置（系统预设）</h3>
            <div class="permission-card">
              <div class="permission-item">
                <span class="permission-name">权限范围</span>
                <span class="permission-value">{{ accessPermissions.permissionScope }}</span>
              </div>
              <div class="permission-item">
                <span class="permission-name">管理所有小区门禁设备</span>
                <span class="permission-value">{{
                  accessPermissions.canManageAllDevices ? '允许' : '禁止'
                }}</span>
              </div>
              <div class="permission-item">
                <span class="permission-name">管理所有小区用户及管理员权限</span>
                <span class="permission-value">{{
                  accessPermissions.canManageAllUsers ? '允许' : '禁止'
                }}</span>
              </div>
              <div class="permission-item">
                <span class="permission-name">查看所有小区门禁及操作日志</span>
                <span class="permission-value">{{
                  accessPermissions.canViewAllLogs ? '允许' : '禁止'
                }}</span>
              </div>
              <div class="permission-item">
                <span class="permission-name">配置全局门禁规则及系统参数</span>
                <span class="permission-value">{{
                  accessPermissions.canConfigureGlobalRules ? '允许' : '禁止'
                }}</span>
              </div>
            </div>
          </div>

          <div class="permission-section">
            <h3 class="section-title">权限调整申请</h3>
            <form class="permission-form">
              <div class="form-group">
                <label class="form-label">权限范围（不可修改）</label>
                <select v-model="formState.newPermissionScope" class="form-control" disabled>
                  <option value="所有小区及全局配置">所有小区及全局配置</option>
                </select>
                <p class="form-hint">超级管理员权限为系统最高权限，如需调整需提交总部IT部门审批</p>
              </div>

              <div class="form-actions">
                <button type="button" class="btn-save" @click="updateAccessPermissions">
                  <i class="fa fa-refresh mr-1"></i>提交权限调整申请
                </button>
              </div>
            </form>
          </div>

          <div class="permission-section">
            <h3 class="section-title">权限说明</h3>
            <div class="permission-note">
              <p><i class="fa fa-info-circle mr-1"></i> 超级管理员操作将被全程审计并保留10年记录</p>
              <p><i class="fa fa-info-circle mr-1"></i> 所有跨小区批量操作需经过二次确认</p>
              <p>
                <i class="fa fa-info-circle mr-1"></i>
                如需要临时授权子管理员，可在"用户管理"模块创建限时权限
              </p>
            </div>
          </div>
        </div>

        <!-- 账户管理标签页 -->
        <div v-if="activeTab === 'account'" class="tab-content">
          <h2 class="tab-title">账户管理</h2>
          <p class="tab-description">管理超级管理员账户状态（操作需总部审批）</p>

          <div class="account-section">
            <h3 class="section-title">账户状态</h3>
            <div class="status-card">
              <div class="status-icon">
                <i class="fa fa-check-circle"></i>
              </div>
              <div class="status-info">
                <h4>超级管理员账户状态正常</h4>
                <p>您的账户拥有系统最高操作权限，所有操作将被记录并同步至总部审计系统</p>
                <p class="status-note">下次密码过期提醒：{{ securitySettings.passwordExpires }}</p>
              </div>
            </div>
          </div>

          <div class="account-section">
            <h3 class="section-title">账户操作（需总部审批）</h3>
            <div class="action-buttons">
              <button class="btn-action btn-download">
                <i class="fa fa-download mr-1"></i>导出全系统操作记录
              </button>
              <button class="btn-action btn-deactivate">
                <i class="fa fa-pause mr-1"></i>暂时停用账户（需双人审批）
              </button>
              <button class="btn-action btn-danger" disabled>
                <i class="fa fa-trash mr-1"></i>注销账户（需总部高管审批）
              </button>
            </div>
            <p class="action-warning">
              <i class="fa fa-exclamation-triangle mr-1"></i>
              超级管理员账户操作需遵循《总部IT安全管理规范》第3.2章，所有变更将触发审计告警
            </p>
          </div>

          <div class="account-section">
            <h3 class="section-title">系统API访问（全局权限）</h3>
            <div class="api-key-card">
              <div class="api-key-display">
                <span v-if="userData.id"
                  >******************************{{ userData.id.slice(-4) }}</span
                >
                <button class="btn-copy">复制全局API密钥</button>
              </div>
              <button class="btn-regenerate">重新生成API密钥（需二次验证）</button>
              <p class="api-hint">
                此API密钥拥有全系统接口访问权限，用于对接企业级系统（如ERP、OA），泄露将触发最高级安全告警
              </p>
              <p class="api-warning">
                <i class="fa fa-warning mr-1"></i>
                重新生成API密钥需总部安全部门确认，将导致所有集成系统暂时失效
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.admin-account-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #f8f9fa;
}

.page-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;

  h1 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #2c3e50;
  }

  .community-tag {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    background-color: #e8f4f8;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;

    .community-name {
      color: #165dff;
      font-weight: 500;
    }

    .community-id {
      color: #888;
      margin-left: 8px;
    }
  }
}

.main-content {
  display: flex;
  gap: 30px;
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
}

.profile-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  text-align: center;

  .avatar-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e8f4f8;

    .avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .profile-info {
    .role {
      color: #666;
      margin: 5px 0;
      font-size: 14px;
    }

    .status {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 12px;
      margin-top: 8px;
    }

    .status-normal {
      background-color: #e6f7ee;
      color: #00b42a;
    }

    .status-warning {
      background-color: #fff7e6;
      color: #ff7d00;
    }
  }
}

.nav-tabs {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  .nav-tab {
    width: 100%;
    padding: 15px 20px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;

    &:hover {
      background-color: #f5f7fa;
    }

    &.active {
      background-color: #e8f4f8;
      color: #0c84ff;
      font-weight: 500;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background-color: #0c84ff;
      }
    }
  }
}

.content-panel {
  flex-grow: 1;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tab-content {
  animation: fadeIn 0.3s ease;
}

.tab-title {
  font-size: 20px;
  margin-bottom: 8px;
  color: #2c3e50;
}

.tab-description {
  color: #666;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.form-group {
  margin-bottom: 20px;

  .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #444;
  }

  .form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;

    &:focus {
      outline: none;
      border-color: #0c84ff;
      box-shadow: 0 0 0 3px rgba(12, 132, 255, 0.1);
    }

    &:disabled {
      background-color: #f5f5f5;
      cursor: not-allowed;
    }
  }

  .form-hint {
    margin-top: 5px;
    font-size: 12px;
    color: #888;
  }
}

.form-actions {
  margin-top: 30px;
}

.btn-save {
  background-color: #0c84ff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #0a6dd3;
  }
}

.security-section,
.account-section,
.permission-section {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;

  .section-title {
    font-size: 16px;
    margin-bottom: 15px;
    color: #2c3e50;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background-color: #0c84ff;
      margin-right: 8px;
      border-radius: 2px;
    }
  }
}

.two-factor-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;

  .setting-description {
    color: #666;
    max-width: 80%;
    line-height: 1.5;
  }
}

.operation-log-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;

  .log-info {
    .log-count {
      color: #0c84ff;
      font-weight: 500;
      margin-top: 5px;
    }
  }

  .btn-view-logs {
    background-color: #e8f4f8;
    color: #0c84ff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: #d5e9f7;
    }
  }
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;

  input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;

    &:before {
      position: absolute;
      content: '';
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }
  }
}

input:checked + .slider {
  background-color: #0c84ff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.login-history-table {
  width: 100%;
  border-collapse: collapse;

  .table-header {
    display: flex;
    background-color: #f0f2f5;
    font-weight: 500;
  }

  .table-row {
    display: flex;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: #f9fafb;
    }
  }

  .table-cell {
    padding: 12px 15px;
    flex: 1;
    font-size: 14px;

    &:first-child {
      flex: 1.5;
    }
  }
}

.permission-card {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  padding: 20px;

  .permission-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .permission-name {
      color: #666;
      font-weight: 500;
    }

    .permission-value {
      color: #333;

      &.allowed {
        color: #00b42a;
      }

      &.denied {
        color: #f53f3f;
      }
    }
  }
}

.permission-note {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  font-size: 14px;

  p {
    margin: 8px 0;
    color: #666;
    display: flex;
    align-items: center;
  }
}

.status-card {
  display: flex;
  align-items: flex-start;
  background-color: #e6f7ee;
  border-radius: 8px;
  padding: 15px;

  .status-icon {
    font-size: 24px;
    color: #00b42a;
    margin-right: 15px;
    margin-top: 2px;
  }

  .status-info {
    p {
      color: #333;
      font-size: 14px;
      margin: 0 0 8px 0;
    }

    .status-note {
      color: #666;
      font-size: 13px;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.btn-action {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;

  &.btn-download {
    background-color: #e8f4f8;
    color: #0c84ff;

    &:hover {
      background-color: #d5e9f7;
    }
  }

  &.btn-deactivate {
    background-color: #fff7e6;
    color: #ff7d00;

    &:hover {
      background-color: #fff0cc;
    }
  }

  &.btn-danger {
    background-color: #fff2f3;
    color: #f53f3f;
    cursor: not-allowed;
    opacity: 0.7;
  }
}

.action-warning {
  color: #f53f3f;
  font-size: 13px;
  padding: 10px;
  background-color: #fff2f3;
  border-radius: 6px;
  margin: 0;
  display: flex;
  align-items: center;
}

.api-key-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 15px;

  .api-key-display {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: #e8f4f8;
    padding: 10px 15px;
    border-radius: 6px;

    span {
      flex-grow: 1;
      font-family: monospace;
      color: #0c84ff;
    }

    .btn-copy {
      background-color: #0c84ff;
      color: white;
      border: none;
      padding: 5px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      margin-left: 10px;
    }
  }

  .btn-regenerate {
    background-color: #e8f4f8;
    color: #0c84ff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 10px;
  }

  .api-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px 0;
  }

  .api-warning {
    font-size: 12px;
    color: #f53f3f;
    margin: 0;
    display: flex;
    align-items: center;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .login-history-table .table-cell {
    font-size: 12px;
    padding: 8px 10px;
  }

  .permission-item {
    flex-direction: column;
    align-items: flex-start;

    .permission-value {
      margin-top: 5px;
    }
  }
}
</style>
